<template>
    <div
        class="full-screen-container bg-gradient-to-br from-sky-50 to-indigo-50 min-h-screen flex items-center justify-center p-6">
        <div class="w-[1200px] bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl flex overflow-hidden">
            <div
                class="w-[45%] bg-gradient-to-br from-sky-100 via-blue-50 to-indigo-100 p-16 flex flex-col justify-between relative">
                <div class="relative z-10">
                    <h1 class="text-4xl font-bold mb-6 text-gray-800 leading-tight mt-0 -mt-14">
                        智能人才成长 <br />画像平台
                    </h1>
                    <p class="text-lg text-gray-600 leading-relaxed mb-4">
                        基于 AI 驱动的人才画像系统，<br />
                        助力企业挖掘人才潜力，实现精准人才管理。
                    </p>
                    <div class="flex flex-wrap gap-4 mb-8">
                        <div class="bg-white/80 backdrop-blur-sm px-4 py-3 rounded-lg flex items-center space-x-2">
                            <i class="iconfont icon-shujufenxi" style="font-size: 2rem; color: #3B82F6;"></i>
                            <span class="text-sm text-gray-700">数据分析</span>
                        </div>
                        <div class="bg-white/80 backdrop-blur-sm px-4 py-3 rounded-lg flex items-center space-x-2">
                            <i class="iconfont icon-rencaiguanli" style="font-size: 1.5rem; color: #3B82F6;"></i>
                            <span class="text-sm text-gray-700">人才管理</span>
                        </div>
                        <div class="bg-white/80 backdrop-blur-sm px-4 py-3 rounded-lg flex items-center space-x-2">
                            <i class="iconfont icon-jiqiren_o" style="font-size: 2rem; color: #3B82F6;"></i>
                            <span class="text-sm text-gray-700">AI 赋能</span>
                        </div>
                    </div>
                </div>
                <img :src="illustrationUrl" alt="人才画像插图"
                    class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-[90%] opacity-90" />
            </div>

            <!-- 右侧注册表单 -->
            <div class="flex-1 flex items-center justify-center" style="width: 20rem !important;">
                <div class="w-[400px]">
                    <h2 class="text-2xl font-bold mb-3 mt-3 text-gray-800">欢迎注册</h2>
                    <form @submit.prevent="handleSubmit" class="space-y-6">
                        <!-- 用户名 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">账号</label>
                            <div class="relative">
                                <i class="iconfont icon-rencaiguanli absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                    style="font-size: 1rem;"></i>
                                <input v-model="formData.account" type="text" placeholder="请输入账号"
                                    class="w-full h-11 pl-11 pr-4 border border-gray-300 !rounded-button input-focus"
                                    @blur="validateAccount" />
                                <p v-if="errors.account" class="text-red-500 text-sm mt-1">{{ errors.account }}</p>
                            </div>
                        </div>

                        <!-- 密码 -->
                        <div style="margin-top: 0.5rem !important;">
                            <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                            <div class="relative">
                                <i class="iconfont icon-mima absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                    style="font-size: 1rem;"></i>
                                <input v-model="formData.password" :type="passwordVisible ? 'text' : 'password'"
                                    placeholder="请输入密码"
                                    class="w-full h-11 pl-11 pr-11 border border-gray-300 !rounded-button input-focus" />
                                <i class="iconfont icon-BasicIcons-all- absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer hover:text-gray-600"
                                    @click="togglePasswordVisibility"></i>
                            </div>
                            <div class="mt-2 text-xs text-gray-500 flex items-center">
                                <i class="iconfont icon-jinggao mr-1" style="font-size: 1rem;"></i>
                                密码须包含字母和数字，长度在 6-16 位之间
                            </div>
                        </div>

                        <!-- 确认密码 -->
                        <div style="margin-top: 0.5rem !important;">
                            <label class="block text-sm font-medium text-gray-700 mb-2">确认密码</label>
                            <div class="relative">
                                <i class="iconfont icon-mima absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                    style="font-size: 1rem;"></i>
                                <input v-model="formData.confirmPassword"
                                    :type="confirmPasswordVisible ? 'text' : 'password'" placeholder="请再次输入密码"
                                    class="w-full h-11 pl-11 pr-11 border border-gray-300 !rounded-button input-focus"
                                    @blur="validatePasswords" />
                                <i class="iconfont icon-BasicIcons-all- absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer hover:text-gray-600"
                                    @click="toggleConfirmPasswordVisibility"></i>
                                <p v-if="errors.confirmPassword" class="text-red-500 text-sm mt-1">{{ errors.confirmPassword
                                }}</p>
                            </div>
                        </div>

                        <!-- 邮箱 -->
                        <div style="margin-top: 0.5rem !important;">
                            <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
                            <div class="relative">
                                <i class="iconfont icon-youxiang absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                    style="font-size: 1rem;"></i>
                                <input v-model="formData.email" type="email" placeholder="请输入邮箱"
                                    class="w-full h-11 pl-11 pr-4 border border-gray-300 !rounded-button input-focus"
                                    @blur="validateEmail" />
                                <p v-if="errors.email" class="text-red-500 text-sm mt-1">{{ errors.email }}</p>
                            </div>
                        </div>

                        <!-- 验证码 -->
                        <div style="margin-top: 0.5rem !important;">
                            <label class="block text-sm font-medium text-gray-700 mb-2">验证码</label>
                            <div class="flex gap-4">
                                <div class="relative flex-1">
                                    <i class="iconfont icon-yanzhengma absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"
                                        style="font-size: 1rem;"></i> <input v-model="formData.captcha" type="text"
                                        placeholder="请输入验证码"
                                        class="w-full h-11 pl-11 pr-4 border border-gray-300 !rounded-button input-focus" />
                                </div>
                                <button type="button" @click="sendVerificationCode" :disabled="isCountdown"
                                    class="!rounded-button whitespace-nowrap px-6 py-3 bg-blue-500 text-white hover:bg-blue-600 transition-all duration-200 flex items-center justify-center min-w-[120px]">
                                    <i class="iconfont icon-zhifeiji mr-2"></i>
                                    {{ isCountdown ? `${countdown} 秒后重试` : '获取验证码' }}
                                </button>
                            </div>
                        </div>

                        <!-- 注册按钮 -->
                        <button style="margin-top: 0.5rem !important;" type="submit"
                            class="w-full h-11 bg-blue-500 text-white font-medium !rounded-button hover:bg-blue-400 transition-colors whitespace-nowrap"
                            >
                            立即注册
                        </button>

                        <!-- 登录链接 -->
                        <div style="margin-top: 0.5rem !important; margin-bottom: 0.5rem !important;" class="text-center">
                            <span class="text-gray-600">已有账号？</span>
                            <a href="#" @click.prevent="goToLogin"
                                class="text-primary hover:text-primary/90 font-medium">立即登录</a>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 引入 useRouter
import { userRegister } from '../api/user.js';

const router = useRouter();

// 图片URL
const illustrationUrl = 'https://ai-public.mastergo.com/ai/img_res/fa9ae7744f0d07f96a1cc2d16fb85468.jpg';

// 表单数据
const formData = ref({
    account: '',
    password: '',
    confirmPassword: '',
    email: '',
    captcha: '',
    agreeToTerms: false
});

// 表单错误提示
const errors = ref({
    account: '',
    password: '',
    confirmPassword: '',
    email: ''
});

// 控制输入密码框显示/隐藏
const passwordVisible = ref(false);
function togglePasswordVisibility() {
    passwordVisible.value = !passwordVisible.value;
}

// 控制确认密码框显示/隐藏
const confirmPasswordVisible = ref(false);
function toggleConfirmPasswordVisibility() {
    confirmPasswordVisible.value = !confirmPasswordVisible.value;
}

// 校验账号
function validateAccount() {
    if (/\d/.test(formData.value.account)) {
        errors.value.account = '账号不能包含数字';
    } else {
        errors.value.account = '';
    }
}

// 校验密码一致性
function validatePasswords() {
    if (formData.value.password !== formData.value.confirmPassword) {
        errors.value.confirmPassword = '两次输入的密码不一致';
    } else {
        errors.value.confirmPassword = '';
    }
}

// 校验邮箱格式
function validateEmail() {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(formData.value.email)) {
        errors.value.email = '请输入有效的邮箱地址';
    } else {
        errors.value.email = '';
    }
}

const isCountdown = ref(false);
const countdown = ref(60);
// 验证码校验
const sendVerificationCode = () => {
    const email = formData.value.email;
    if (!email) {
        alert('请输入邮箱地址');
        return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        alert('请输入有效的邮箱地址');
        return;
    }
    isCountdown.value = true;
    const interval = setInterval(() => {
        if (countdown.value <= 0) {
            clearInterval(interval);
            isCountdown.value = false;
            countdown.value = 60;
        } else {
            countdown.value--;
        }
    }, 1000);
};

// 提交表单
const handleSubmit = () => {
    validateAccount();
    validatePasswords();
    validateEmail();

    if (!/[a-zA-Z]/.test(formData.value.password) || !/[0-9]/.test(formData.value.password) || formData.value.password.length < 6 || formData.value.password.length > 16) {
        alert('密码必须包含字母和数字，长度在 6-16 位之间');
        return;
    }

    userRegister(formData.value.account, formData.value.password, formData.value.email).then((response) => {
            router.push({ path: '/login' });
        }).catch((error) => {
            fullscreenLoading.value = false;
        });
};


// 跳转到登录页面
const goToLogin = () => {
    router.push('/login');
};
</script>
  
<style scoped>
.bg-gradient-to-br {
    background-size: 200% 200%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

input {
    outline: none;
}

/* 设置页面容器宽度为 100vw 和高度为 100vh，保证页面大小与浏览器同步 */
.full-screen-container {
    width: 100vw;
    /* 浏览器窗口的宽度 */
    height: 100vh;
    /* 浏览器窗口的高度 */
    background-color: #3a88bc;
    /* 可以选择合适的背景色 */
    margin: 0;
    /* 去除默认的外边距 */
    padding: 0;
    /* 去除默认的内边距 */
}

/* 如果有特定的样式应用于 .body，可以考虑调整 */
.body {
    width: 100%;
}</style>